<template>
  <div class="payment">
    <div class="mn">
      <div class="title">请输入你要缴费的车牌号:</div>
      <div class="ui-input">
        <div class="input" v-for="(item,index) in liNum" @click="t(item.index)">
          <span class="in-info">{{item.v}}</span>
        <span class="in-span" :class='{ isfocus: index== focusIndex }'></span>
        </div>
      </div>
      <div class="newPlate">
        <label for="newCheckPlate" class="iconfont" :class='{ "icon-fuxuan1" : isSelect ,"icon-fuxuan":!isSelect }'>&nbsp新能源车牌</label>
        <input id="newCheckPlate" type="checkbox" @change="changeSelect" class="disNone">
      </div>
      <div class="query clearfix">
        <x-button type="primary" @click="query">查询</x-button>
      </div>
      <div class="plate">
        <div><i class="iconfont icon-che"></i><a>粤B 888888</a></div>
        <div><i class="iconfont icon-che"></i><a>粤B 888888</a></div>
      </div>
      <div class="bot-tips">
        <span>在线缴费，方便快捷</span>
      </div>
    </div>
    <div class="ft">
      <b-t1panel @closePanel1="closePanel1" :show0="show0" @setInputV="setInputV" @t="t"></b-t1panel>
      <b-t2panel @closePanel2="closePanel2" :show1="show1" @setInputV="setInputV" @t="t" @deleteV="deleteV"></b-t2panel>
      <b-t3panel @closePanel3="closePanel3" :show2="show2" @setInputV="setInputV" @t="t" @deleteV="deleteV"></b-t3panel>
      <b-t4panel @closePanel4="closePanel4" :show3="show3" @setInputV="setInputV" @t="t" @deleteV="deleteV"></b-t4panel>
    </div>
    <!--查询面板-->

  </div>
</template>
<script>
  import { XButton } from 'vux'
  import BT1panel from '@/components/bt1-panel'
  import BT2panel from '@/components/bt2-panel'
  import BT3panel from '@/components/bt3-panel'
  import BT4panel from '@/components/bt4-panel'
  export default{
    components: {
      XButton,
      BT1panel,
      BT2panel,
      BT3panel,
      BT4panel
    },
    data () {
      return {
        show0: false,
        show1: false,
        show2: false,
        show3: false,
        isfocus:false,
        isSelect:true,
        focusIndex:11,
        index: 1,
        inNum:1,
        liNum:[
            {v:"",index:"1"},
            {v:"",index:"2"},
            {v:"",index:"3"},
            {v:"",index:"4"},
            {v:"",index:"5"},
            {v:"",index:"6"},
            {v:"",index:"7"},
            {v:"",index:"8"},
        ],
      }
    },
    created () {
      document.getElementsByTagName('html')[0].style.background="#f2f2f2";
      document.getElementsByTagName('body')[0].style.background="#f2f2f2";
    },
    // 代码待优化
    methods: {
      // 打开对应面板
      t(i) {
          if(i==null||i==undefined||i==""){
              i=this.inNum;
          }else{
              i=parseInt(i);
              this.inNum=i;
          }
          this.focusIndex=i;
          this.focusIndex--;
        switch (i) {
          case 1:
            this.show0 = true;
            this.show1 = false;
            this.show2 = false;
            this.show3 = false;
            this.inNum ++;
            break;
          case 2:
            this.show0 = false;
            this.show1 = true;
            this.show2 = false;
            this.show3 = false;
            this.inNum ++;
            break;
          case 7:
              if(this.liNum.length<=7){
                this.show0 = false;
                this.show1 = true;
                this.show2 = false;
                this.show3 = false;
                return false;
              }else{
                this.show0 = false;
                this.show1 = false;
                this.show2 = true;
                this.show3 = false;
                this.inNum ++;
              }

            break;
          case 8:
            this.show0 = false;
            this.show1 = false;
            this.show2 = false;
            this.show3 = true;
            break;
          default:
            this.show0 = false;
            this.show1 = false;
            this.show2 = true;
            this.show3 = false;
            this.inNum ++;
            break;
        }
      },
      deleteV(){
        this.liNum[this.focusIndex].v ="";
        this.focusIndex--;
      },
      changeSelect(){
          this.isSelect=!this.isSelect;
          //删除 添加节点
          if(!this.isSelect){
              this.liNum.pop();
            //判断最后一个面板是否打开
              if(this.show3){
                this.show3=false;
              }
          }else{
            this.liNum.push({v:"",index:"8"})
          }
      },
      // 关闭底部面板
      closePanel1 () {
        this.show0 = false;
      },
      closePanel2 () {
        this.show1 = false;
      },
      closePanel3 () {
        this.show2 = false;
      },
      closePanel4 () {
        this.show3 = false;
      },
      // 给文本框赋值的方法
      setInputV (v) {
          this.liNum[this.focusIndex].v = v;
      },
      // 缴费查询
      query () {

      }
    }
  }
</script>
